<template>
  <view class="interview-page">
    <view class="header">
      <view class="title">面试进行中</view>
      <view class="timer">剩余时间：{{ formatTime(remainingTime) }}</view>
    </view>
    <view class="main-content">
      <view class="video-area">
        <view class="video-container">
          <view class="avatar">
            <u-icon name="account-fill" color="#fff" size="60"></u-icon>
          </view>
          <view class="status">等待面试官接入...</view>
        </view>
      </view>
      <view class="control-area">
        <view class="control-btn">
          <u-icon name="mic" color="#07C160" size="40"></u-icon>
          <text>麦克风</text>
        </view>
        <view class="control-btn">
          <u-icon name="camera" color="#07C160" size="40"></u-icon>
          <text>摄像头</text>
        </view>
        <view class="control-btn">
          <u-icon name="volume" color="#07C160" size="40"></u-icon>
          <text>音量</text>
        </view>
      </view>
      <view class="action-area">
        <u-button type="error" shape="square" class="end-btn" @click="endInterview">结束面试</u-button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      remainingTime: 1800, // 30分钟
      timer: null
    }
  },
  onLoad() {
    this.startTimer();
  },
  onUnload() {
    this.clearTimer();
  },
  methods: {
    startTimer() {
      this.timer = setInterval(() => {
        if (this.remainingTime > 0) {
          this.remainingTime--;
        } else {
          this.clearTimer();
          this.endInterview();
        }
      }, 1000);
    },
    clearTimer() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    formatTime(seconds) {
      const minutes = Math.floor(seconds / 60);
      const remainingSeconds = seconds % 60;
      return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
    },
    endInterview() {
      uni.showModal({
        title: '确认结束',
        content: '确定要结束本次面试吗？',
        success: (res) => {
          if (res.confirm) {
            this.clearTimer();
            uni.navigateTo({
              url: '/pages/interviewResult/interviewResult'
            });
          }
        }
      });
    }
  }
}
</script>

<style scoped>
.interview-page {
  min-height: 100vh;
  background: #f6f6f6;
  display: flex;
  flex-direction: column;
}
.header {
  background: #fff;
  padding: 32rpx;
  text-align: center;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}
.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
}
.timer {
  font-size: 24rpx;
  color: #999;
}
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 32rpx;
}
.video-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32rpx;
}
.video-container {
  width: 100%;
  aspect-ratio: 16/9;
  background: #fff;
  border-radius: 16rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}
.avatar {
  width: 120rpx;
  height: 120rpx;
  background: #07C160;
  border-radius: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16rpx;
}
.status {
  font-size: 28rpx;
  color: #999;
}
.control-area {
  display: flex;
  justify-content: space-around;
  margin-bottom: 32rpx;
}
.control-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
}
.control-btn text {
  font-size: 24rpx;
  color: #666;
}
.action-area {
  margin-top: auto;
}
.end-btn {
  font-size: 32rpx;
  font-weight: bold;
}
</style> 